<template>
  <div class="date-time-picker-box">
    <div class="block">
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        :picker-options="dataTimeProps.pickerOptions"
        range-separator="至"
        :start-placeholder="dataTimeProps.startPlaceholder"
        :end-placeholder="dataTimeProps.endPlaceholder"
        :align="dataTimeProps.align"
        :size="dataTimeProps.size"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: "DateTimePicker",
  props: {
    dataTimeProps: {
      type: Object,
      default() {
        return {
          size: "mini",
          startPlaceholder: "开始日期时间",
          endPlaceholder: "结束日期时间",
          align: "left",
          pickerOptions: {
            shortcuts: [
              {
                text: "最近一周",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", [start, end]);
                }
              },
              {
                text: "最近一个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit("pick", [start, end]);
                }
              },
              {
                text: "最近三个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit("pick", [start, end]);
                }
              }
            ]
          }
        };
      }
    }
  },
  data() {
    return {
      dateTime: null
    };
  }
};
</script>

<style lang="scss" scoped></style>
